﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wap/Shop/ShopSite.Master" AutoEventWireup="true"  CodeBehind="ProductList.aspx.cs" Inherits="ZLCMS.Web.Wap.Shop.ProductList" %>

<%@ Import Namespace="ZLCMS.Business.Util" %>

<%@ Register src="Footer.ascx" tagname="Footer" tagprefix="uc1" %>
<%@ Register src="UC_ShopNavBar.ascx" tagname="UC_ShopNavBar" tagprefix="uc2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title><%= ParamKit.GetValue("ProductType", Request["categoryid"], "商品目录") %></title>
    <!--E banner-->

    <style type="text/css">
	.ui-panel-dismiss-open.ui-panel-dismiss-position-right{background:rgba(0, 0, 0, 0.5)!important; filter:Alpha(opacity=50); }
	#mypanel{ box-shadow:none;}
		.proList ul li.tmps2 .txt span.other{margin-right: 4px;padding: 0px 5px; margin-left:0;background-color:#ff9a26; color: #fff; }
	    .proList ul li.tmps2 .txt span.coupon{margin-right: 4px;padding: 0px 5px; margin-left:0;background-color: #2db0c1; color: #fff; }
	    .proList ul li.tmps2 .txt span.discount{margin-right: 4px;padding: 0px 5px; margin-left:0;background-color: #A839F9; color: #fff; }
	    .proList ul li.tmps2 .txt span.forsale{margin-right: 4px;padding: 0px 5px; margin-left:0;background-color: #f9384d; color: #fff; }
	    .proList ul li.tmps2 .txt{height:33px;  line-height:14px;}
	    .ShortDescTag{height:20px;margin-top:7px;}
	    .proList ul li.tmps2 .txt{margin-top:2px;}
	    .ShortDescTag{height:20px;margin-top:3px;}
	    .proList ul li.tmps2 .txt p{height:33px;overflow: hidden;line-height:16px;font-size:14px;color: #666;}
	    .proList ul li.tmps2 .txt span{margin-left: 0;display: inline-block;height: 16px;}
	    .proList ul li.tmps2 .tit .right{color:#ccc;}
        .proList ul li.tmps2 .txt p span{font-size:12px;height:14px;line-height:14px;vertical-align: middle;padding: 0 2px;margin: 2px 2px 2px 0;color:#fff;background:#f9384d;}
	    .proList ul li.tmps2 .tit .left{height:29px;line-height: 29px;font-size: 18px;}
	    .proList{padding:0;}
	    .proList ul{display:flex;flex-wrap: wrap;}
	    .proList ul li.tmps2{margin:0;padding: 5px;border:none;border-bottom: 1px solid #eee;box-sizing: border-box;}
	    .proList ul li.tmps2 .pimg img.pimgc{overflow: hidden;width: 100%;}
	    #searchResult li:nth-of-type(odd){border-right:1px solid #eee;}
	    .ShortDescTag span{background: #ffffff;color:#fd2424;padding:0px 2px;font-size: 11px;margin:1px 2px 0px 0px;border: 1px solid #fd2424;display: inline-block;border-radius: 2px;}
	    .ShortDescTag span.dibiao{color:#ff8e00;border:1px solid #ff8e00;}
	    .ShortDescTag span.baoyou{color:#fd2424;border:1px solid #fd2424;}
	    .ShortDescTag span.youji{color:#0daa0d;border:1px solid #0daa0d;}
        @media screen and (max-width: 330px) {
	        .proList ul li.tmps2 .pimg img.pimgc{height:154px;}
        }
        @media (min-width:350px) and (max-width:400px) {
	        .proList ul li.tmps2 .pimg img.pimgc{height:180px;}
        }
        @media (min-width:400px) and (max-width:550px) {
	        .proList ul li.tmps2 .pimg img.pimgc{height:195px;}
        }
    </style>
    
    <!--panel 打开时禁止滚动-->
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="pages" runat="server">
    <!--S page -->

<div data-role="page" id="mypage" style="background-color:#fff">

    <!--S panel-->
    <div data-role="panel" id="choosepanel" data-display="overlay" data-position="right">
    	<div data-role="header">
        	<a href="#" data-rel="close">取消</a>
        	<h2>筛选</h2>
            <a href="#" onclick="querySearchProp();">确认</a>
		</div>
        <div role="main" class="ui-content">
        <div data-role="collapsible-set" class="searchpropcontainer" data-iconpos="right" data-inset="false">
                                        
            </div>  
        </div><div data-role="footer" class="panelfooter">
        	<a href="#" onclick="$('.searchpropcontainer').searchPropHandler().clearSelected()">清楚所有选项</a>
        </div>
	</div>
    <!--E panel-->

	<!--S header -->
	<div data-role="header" data-position="fixed"  data-tap-toggle="false">
    	<%--<table width="98%" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td class="choosebtn" style="width:20%;display:none"><a href="#choosepanel" data-role="button"><img src="images/header_class.png"  ></a></td>
            <td style="padding-left:5px"><input type="search" id="keyword" placeholder="请输入搜索关键词" value="<%=Request["keyword"] %>"></td>
            <td><input name="" type="button" value="搜索" onclick="queryData();"></td>
          </tr>
        </table>--%>
        <input type="hidden" id="keyword" placeholder="请输入搜索关键词" value="<%=Request["keyword"] %>">
	    <uc2:UC_ShopNavBar ID="UC_ShopNavBar1" runat="server" />
	</div>
    <!--E header -->
	
    <!--S content -->
	<div role="main" class="ui-content">
        <div class="prolist_nav">
        <input type="hidden" id="orderfield"/>
        <input type="hidden" id="orderdirection"/>
    <div data-role="navbar" style="display: none;">
        <ul class="orders">
        <li order="SalePrice" dir='<%= string.IsNullOrEmpty(Request["SalePrice"]) ? "0" : Request["SalePrice"]  %>'><a data-theme="m" href="javascript:void(0)">价格</a></li>
        <li order="SellCount" dir='<%= string.IsNullOrEmpty(Request["SellCount"]) ? "0" : Request["SellCount"]  %>'><a data-theme="m" href="javascript:void(0)">销量</a></li>
        <li order="GroundingTime" dir='<%= string.IsNullOrEmpty(Request["GroundingTime"]) ? "0" : Request["GroundingTime"]  %>'><a data-theme="m" href="javascript:void(0)">上架时间</a></li>
        </ul>
    </div>
    </div>
        <!--s proList-->
        <div class="proList" >
        	<ul id="searchResult">

            </ul>
            <div style="display:none">
                <button id="btnMore" data-icon="refresh" style="width: 95%; margin-left: auto; margin-right: auto;">显示更多</button>
            </div>
        </div>
        <!--e proList-->
        
    </div>
    <!--E content -->
	
    <!--S footer -->
	<div data-role="footer" data-position="fixed" data-tap-toggle="false">    
        <uc1:Footer ID="Footer1" runat="server" />    
    </div>
    <!--E footer -->
</div>
<!--E page -->
  
<script>
    var _hmt = _hmt || [];
</script>
<script src="/wap/lib/common/listviewHandler.js" type="text/javascript"></script>
<script src="js/searchPropHandler.js" type="text/javascript"></script>
<script src="/Wap/lib/jquery_lazyload/jquery.lazyload.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var searchPropList = [];
    $('ul.orders li[order]').click(function () {
        var imgSrc = 'images/sxtop_icon.png';
        if ($(this).attr('dir') == '0') {
            $('ul.orders li[order]').each(function () {
                $('a>img', $(this)).remove();
                $(this).attr('dir', '0');
            });
            $('a', $(this)).prepend('<img src="">');
        }

        if ($(this).attr('dir') == 'desc') {//升序改为降序
            $(this).attr('dir', 'asc');
            imgSrc = 'images/sxbottom_icon.png';
        } else {//默认降序
            $(this).attr('dir', 'desc');
            imgSrc = 'images/sxtop_icon.png';
        }

        $('a>img', $(this)).attr('src', imgSrc);
        queryData();
    });

//    var imgHW4tmps2 = 0;

    function queryData() {
        var handler = $('#searchResult').listviewHandler();
        var itemTemplateS1 = '<li class="tmps1" onclick="location.href=\'/Wap/Shop/ProductDetail.aspx?no={ProductNo}\'">'
                	+ '<div class="img"><img src="{ThumbnailImg}">'
                    + '<div class="tit">'
                    + '<div class="left">{TagType}{ProductName}</div>'
                    + '<div class="right">已售 <span>{SellCount}</span></div>' //<a href="/Wap/Shop/ProductDetail.aspx?no={ProductNo}" data-ajax="false"><img src="images/cart_icon.png"></a>
                    + '<div class="clear"></div>'
                    + '</div>'
                    + ' </div>'
                    + '<p>￥{SalePrice}{MarketPriceHtml}</p>'
                + '</li>';

        var itemTemplateS2 = '<li class="tmps2" onclick="location.href=\'/Wap/Shop/ProductDetail.aspx?no={ProductNo}\'">'
                	+ '<div class="pimg"><img class="pimgc" data-original="{ThumbnailImg}" src="images/loading.gif"/>{sellouttips}</div>'
                    +'<div class="txt"><p>{TagType}{ProductName}</p></div>'
                    +'<div class="ShortDescTag">{MyShortDescTag}</div>'
                    + '<div class="tit">'
                    + '<div class="left"><i>￥</i>{SalePrice}{MarketPriceHtml}</div>'
                    + '<div class="right">已售 <span>{SellCount}</span></div>'  //<a href="/Wap/Shop/ProductDetail.aspx?no={ProductNo}" data-ajax="false"><img src="images/cart_icon.png"></a>
                    + '<div class="clear"></div>'
                    + '</div>'
                + '</li>';

        var itemTemplateS3 = '<li class="tmps3" onclick="location.href=\'/Wap/Shop/ProductDetail.aspx?no={ProductNo}\'">'
                    +'<div class="Left {sellout}" style="background:url({ThumbnailImg}) no-repeat; background-size:cover;">{sellouttips}</div>'
                    +'<div class="Right">'
                    +'<div class="txt">{TagType}{ProductName}</div>'
                    +'<div class="txt txtsum">{ShortDesc}</div>'
                    + '<div class="tit">'
                    + '<div class="left"><i>￥</i>{SalePrice}{MarketPriceHtml}</div>'
                    + '<div class="right">已售 <span>{SellCount}</span></div>'  //<a href="/Wap/Shop/ProductDetail.aspx?no={ProductNo}" data-ajax="false"><img src="images/cart_icon.png"></a>
                    + '<div class="clear"></div>'
                    + '</div>'
                    +'</div>'
                +'</li>';


        var tempStyle = itemTemplateS<%= Request["tmps"] == null ? "2" : Request["tmps"] %>;
        var tmpsId = <%= Request["tmps"] == null ? "2" : Request["tmps"] %>

//        if(tmpsId == "2"){        
//            imgHW4tmps2 = parseInt(($('#searchResult').width() -10 )/2);
//        }

        handler.initialize({
            loaderBtn: $('#btnMore'), //加载数据按钮（点击加载下一页）
            emptyHtml: '无记录', //无记录时显示此html
            itemTemplate: tempStyle, //项模板
            pageIndex: 1, //页码（从1起算）
            pageSize: 10, //页大小
            totalCount: 999, //总记录数
            itemHandler: function (data, itemTemplate, container) {//数据各项处理
                data.ThumbnailImg = firstThumbnail(data.ThumbnailImg);
                data.sellout = '';
                data.sellouttips = '';
                if(data.Storage <= 0){
                    //暂时不能支持
                    data.sellout = 'sellout';
                    data.sellouttips = '<div class="sellout">售罄</div>';
                    //$('.tmps3 .left').addClass('sellout');
                }

//                if(tmpsId == "2"){ 
//                    data.tmps2imgHW = 'width:'+ imgHW4tmps2 + "px; height:" + imgHW4tmps2 + "px;";  
//                }
               //处理优惠分类
                data.TagType="";
                //设置产品标签
                data.MyShortDescTag="";
                data.MyProductNameTag="";
                data.MarketPriceHtml = data.SalePrice !== data.MarketPrice ?'<del style="color: rgb(153, 153, 153); margin-left: 5px; font-size: 12px;">'+data.MarketPrice+'</del>' : '';
                var ShortDescTagArray =[];
                var MyProductNameArray =[];
                if(data.ShortDescTag != null && data.ShortDescTag != ''){
                    ShortDescTagArray = data.ShortDescTag.split(',');
                    $(ShortDescTagArray).each(function(index){
                        if(this != ''){
                             switch (ShortDescTagArray[index]) {
                                case "全国包邮":data.MyShortDescTag += '<span class="baoyou">全国包邮</span>';break;
                                case "地标":data.MyShortDescTag += '<span class="dibiao">地标产品</span>';break;
                                case "有机认证":data.MyShortDescTag += '<span class="youji">有机认证</span>';break;
                                case "":break;
                                default:data.MyShortDescTag +='<span>'+this+'</span>';break;
                            }
                        };
                    });
                }   
               //判断TagKind类型
                var New_TagType = [];
                for(i=0;i<data.TagKind.length;i++) {
　　                  var items=data.TagKind[i];
　　                  if($.inArray(items,New_TagType)==-1) {
　　　　                New_TagType.push(items);
                        switch (New_TagType[i]) {
                            case "discount":data.TagType += data.TagType+'<span>直降</span>';break;
                            case "conditional_discount":data.TagType += data.TagType+'<span>满减</span>';break;
                            case "shipfee":data.TagType += data.TagType+'<span>包邮</span>';break;
                            case "coupon":data.TagType += data.TagType+'<span>优惠券</span>';break;
                            case "conditional_gift":data.TagType += data.TagType+'<span>满赠</span>';break;
                            case "gift":data.TagType += data.TagType+'<span>买赠</span>';break;
                            default:data.TagType += data.TagType+"";break;
                        }
　　                  };
                };

                return itemTemplate.format(data);
               },
               //之前
                beforeHandleResult: function (result, totalCount, container) {
               
                },
                afterHandleResult: function (result, totalCount, container) {
                 //图片延迟加载
                  $('img.pimgc').lazyload({
                      event: 'scrollstop'
                  });
                },
            command: 'Pub.LoadProductList',
            parameter: { Keyword: $('#keyword').val(),SearchPropList:searchPropList, CategoryId: '<%=UC_ShopNavBar1.CurrentCategory>0? UC_ShopNavBar1.CurrentCategory.ToString():""%>', OrderField: $('ul.orders li[dir!="0"]').attr('order'), OrderDirection: $('ul.orders li[dir!="0"]').attr('dir'),TagId:"<%=Request["tag"] %>" }
        });
        handler.nextPage();
    }

    function querySearchProp() {
        searchPropList = $('.searchpropcontainer').searchPropHandler().getResult();
        $("#choosepanel").panel("close");
        queryData();
    }

    //初始化搜索属性
    function initializeSearchProp() {
        if('<%=Request["CategoryId"] %>' == '') return;
        else return; //暂时没有使用该功能
        
        $('.searchpropcontainer').executeCommand({ successCallBack: function (result, totalCount) {
            $('.searchpropcontainer').searchPropHandler({
                glist: result.List,
                //分组模板
                groupTemplate: '<div data-role="collapsible" sp_group="{id}">' +
                                '<h2><font>{name}</font><span class="selected_text">全部</span></h2>' +
                                 '<fieldset data-role="controlgroup" data-iconpos="right">{itemlist}</fieldset>' +
                            '</div>',
                //单选模板
                radioItemTemplate: '<input sp_item="{id}" name="sp_{gid}" id="sp_item_{id}" value="{id}" type="radio">' +
                            '<label for="sp_item_{id}">{name}</label>',

                //多选模板
                checkboxItemTemplate: '<input sp_item="{id}" name="sp_{gid}" id="sp_item_{id}" value="{id}" type="checkbox">' +
                            '<label for="sp_item_{id}">{name}</label>'
            });
            if (result.List.length > 0) { $('.choosebtn').show() };
        }
        }, 'Pub.LoadSearchPropList', { CategoryId: '<%=Request["CategoryId"] %>' });
    }

    //导航更多
            function showlist(){
                $('.ui-content').css('min-height',$(window).height());
                $('.storedefault .navBar .others').css('height',$(document).height());
                var isShow = true;
                $(document).click(function(){
                     $('.storedefault .navBar .others').hide();
                     isShow = true;
                });
                $('.storedefault .navBar ul li:last-child').click(function(){
                if(isShow){
                    $('.storedefault .navBar .others').show();
                    isShow = false;
                }else{
                    $('.storedefault .navBar .others').hide();
                    isShow = true
                }
                event.stopPropagation();
                });
                $('.storedefault .navBar .others ol').click(function(){
                    event.stopPropagation();
                });
            }
    $(function () {
        queryData();
//        initializeSearchProp(); 暂时没有启用
        showlist();

    });
	
    $(function () {
        $(window).scroll(function () {
            //当内容滚动到底部时加载新的内容

            if ($(this).scrollTop() + $(window).height() + 20 >= $(document).height() && $(this).scrollTop() > 20) {
                //当前要加载的页码
                $('#btnMore').click();
            }
        });
    });

    window.onresize = function(){
        var tmpsId = <%= Request["tmps"] == null ? "2" : Request["tmps"] %>
//        if(tmpsId == "2"){
//            imgHW4tmps2 =  ($('#searchResult').width() -10 )/2;
//            $('.pimg>img.pimgc').width(imgHW4tmps2);
//            $('.pimg>img.pimgc').height(imgHW4tmps2);
    };

    $(document).ready(function(){
        $.cookie('After',$.cookie('CurrentPage'));
        $.cookie('CurrentPage','productlist');
        var After = $.cookie('After');
        var Current = $.cookie('CurrentPage');
        //保存统计记录
        var path ='productlist|path|'+Current + '|' + After;
        _hmt.push(['_trackEvent', path, 'enter', 'productlist']);
        _hmt.push(['_trackEvent', 'page', 'view', 'productlist']);
    });
</script>
</asp:Content>
